<!DOCTYPE html>
<html lang="en">
<head>
    <link href="../style/category.css" rel="stylesheet">
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="category_app">
        <div class="head_title">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="../page/firstIndex.html">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin-bottom: 20px;margin-top: 20px">
            <el-input
                    style="width: 15%;"
                    class="Search_input"
                    placeholder="请输入分类名称"
                    v-model="input"
                    clearable>
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="searchBtn" class="searchBtn">搜索</el-button>
        </div>

        <div>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="序号"
                            align="center"
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="createUser"
                            label="创建人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态">
                    </el-table-column>
                    <el-table-column label="操作"  align="center" width="280">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>

    </div>

<script src="../plugin/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugin/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugin/axios/axios.min.js"></script>
<script>
    let app = new Vue({
        el:"#category_app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        },
        data() {
            return {
                tableData: [{
                    name:'zs',
                    createTime:'2000/10/03',
                    createUser:'admin',
                    status:0
                }]
            }
        }
    })
</script>
</body>
</html>